<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Ionic App - Legacy Mode</title>
    <base href="./" />
    <meta name="color-scheme" content="light dark" />
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    
    <link rel="icon" type="image/png" href="./ionic/assets/icon/favicon.png" />
    <link href="./ionic/css/chunk-ionic.f5c8e0e3.css" rel="stylesheet">
    <link href="./ionic/css/app.7b141fc5.css" rel="stylesheet">
    
    <style>
        .debug-overlay {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
            z-index: 9999;
            max-width: 300px;
            max-height: 200px;
            overflow-y: auto;
        }
        .debug-status {
            margin: 2px 0;
        }
        .success { color: #4CAF50; }
        .error { color: #f44336; }
        .warning { color: #ff9800; }
        
        /* 临时显示内容，防止完全空白 */
        #app:empty::before {
            content: "正在加载 Ionic 应用...";
            display: block;
            text-align: center;
            padding: 50px;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    
    <div class="debug-overlay" id="debug-info">
        <div class="debug-status">🔄 初始化中...</div>
    </div>
    
    <script>
        console.log('=== Ionic Legacy Test Started ===');
        
        const debugInfo = document.getElementById('debug-info');
        let debugMessages = [];
        
        function addDebugMessage(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            debugMessages.push(`[${timestamp}] ${message}`);
            console.log(`Debug: ${message}`);
            
            const className = type === 'success' ? 'success' : type === 'error' ? 'error' : type === 'warning' ? 'warning' : '';
            debugInfo.innerHTML = debugMessages.slice(-10).map(msg => 
                `<div class="debug-status ${className}">${msg}</div>`
            ).join('');
        }
        
        window.addEventListener('error', function(e) {
            addDebugMessage(`❌ 错误: ${e.message} (${e.filename}:${e.lineno})`, 'error');
        });
        
        window.addEventListener('unhandledrejection', function(e) {
            addDebugMessage(`❌ Promise 错误: ${e.reason}`, 'error');
        });
        
        addDebugMessage('✅ HTML 加载完成', 'success');
        
        // 检查应用挂载
        let vueCheckCount = 0;
        function checkVueApp() {
            vueCheckCount++;
            const app = document.getElementById('app');
            
            if (app && app.children.length > 0) {
                addDebugMessage('✅ Vue 应用已挂载', 'success');
                setTimeout(() => {
                    debugInfo.style.display = 'none';
                }, 3000);
                return true;
            } else if (vueCheckCount < 100) {
                setTimeout(checkVueApp, 300);
                if (vueCheckCount % 10 === 0) {
                    addDebugMessage(`⏳ 等待应用挂载... (${vueCheckCount}/100)`, 'warning');
                    
                    // 检查全局对象
                    if (typeof Vue !== 'undefined') {
                        addDebugMessage('✅ Vue 全局对象可用', 'success');
                    }
                    if (typeof window.Ionic !== 'undefined') {
                        addDebugMessage('✅ Ionic 全局对象可用', 'success');
                    }
                }
            } else {
                addDebugMessage('❌ 应用挂载超时', 'error');
                
                // 尝试手动创建一个简单的应用
                addDebugMessage('🔧 尝试手动创建应用...', 'warning');
                const app = document.getElementById('app');
                app.innerHTML = `
                    <div style="padding: 20px; text-align: center;">
                        <h1>Ionic 应用加载失败</h1>
                        <p>正在使用备用模式...</p>
                        <ion-button onclick="alert('按钮点击成功!')">测试按钮</ion-button>
                    </div>
                `;
                addDebugMessage('✅ 备用内容已显示', 'success');
            }
        }
        
        // 脚本加载完成回调
        let scriptsLoaded = 0;
        const totalScripts = 3;
        
        function onScriptLoaded(scriptName) {
            scriptsLoaded++;
            addDebugMessage(`✅ ${scriptName} 加载完成 (${scriptsLoaded}/${totalScripts})`, 'success');
            
            if (scriptsLoaded === totalScripts) {
                addDebugMessage('✅ 所有脚本加载完成', 'success');
                setTimeout(() => {
                    addDebugMessage('🔍 开始检查应用挂载...', 'warning');
                    checkVueApp();
                }, 1000);
            }
        }
        
        function onScriptError(scriptName, error) {
            addDebugMessage(`❌ ${scriptName} 加载失败: ${error}`, 'error');
        }
        
        window.onload = function() {
            addDebugMessage('✅ 页面加载完成', 'success');
        };
    </script>
    
    <!-- 使用传统方式加载 Legacy 版本的 JavaScript -->
    <script src="./ionic/js/chunk-ionic-legacy.b2c76632.js" 
            onload="onScriptLoaded('Ionic Legacy')" 
            onerror="onScriptError('Ionic Legacy', 'load failed')"></script>
    <script src="./ionic/js/chunk-vendors-legacy.30a74f52.js" 
            onload="onScriptLoaded('Vendors Legacy')" 
            onerror="onScriptError('Vendors Legacy', 'load failed')"></script>
    <script src="./ionic/js/app-legacy.55c5c7f4.js" 
            onload="onScriptLoaded('App Legacy')" 
            onerror="onScriptError('App Legacy', 'load failed')"></script>
</body>
</html>